<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式</title>
		<!-- 元素样式操作  ； 直接操作元素的样式下的属性和属性值  
		 css()                       功能·；
  		                              1个参   传入属性名
									  功能·  获取匹配元素集合中的第一个元素的css属性值
		                              2个参    
		                              n个参  
		 
		 
		 width()和height()      
		                   功能  匹配元素集合中第一个元素款高度
						    无参  获取匹配元素集合中的第一个·元素高度
							有参；设置匹配元素集合中第一个元素款高度
							width（数值）
		 outerwidth()和outer height()
		 outerWidth （）和outerHeight()
		 -->
		 <script src="../MI/js/jquery-1.11.1.js"></script>
		 <style>
			.box{
				background: #153;
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
				
			}
			 .result{
				 margin-top:10px ;
				 font-weight: 700;
			 }
		 </style>
	</head>
	<body>
		<!-- 创建两个div  6个按钮 -->
		<!-- 1.0显示效果区域 -->
		<div class="box" id="targetBox" ></div>
		<button id="getColorbtn" >获取颜色属性值</button>
		<button id="setBtn">设置多属性</button>
		<button  id="gsBtn"> 获取元素宽度/设置元素宽度</button>
		<button id="btn"></button>
		<button id="btn"></button>
		<!-- 2.0 结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			// 1.0获取 颜色属性值  按钮  获取颜色值并打印yei面上
			$("#getColorbtn").click(function(){
				//获取css属性值方式  传入属性名即可
			var bgColor= $(".box").css("backgrount-color");
			//页面上打印属性值 
			
			$("#result").text("获取属性值是"+bgColor)
			});
			
			// 点击  设置多属性效果  按钮
			$("#setBtn").click(function(){
				$(".box").css({ "background-image"url("../img/1.png"),
				"border ":"5px solid #ff0",
				"width":"300px",
				"height:300px",
				"background-size":"100%",
				"border-radius":"50%",
				"box-shadow":"5px 5px 10px #ff0",
				});
				
			});
			// 4.0点击 获取 宽度设置
			$("#gsBtn").click(function(){
				var w=$(".box").width(400);
				$("#result").text("获取款高度是；"+w+"px");
			});
			//5.0点击高度
			$("bpBtn ").click(function{
				var  bp =$("获取高度为")
				
			})
			
			
			$("获取高度")
			
		</script>
		
	</body>
</html>